<template>
  <div>
    <div class="box">
      <div class="content">
        <div class="login-wrapper" v-if="!showRegister">
          <h3>登录 You & Me</h3>
          <div class="login-form">
            <div class="username form-item">
              <input
                v-model="loginData.username"
                type="text"
                placeholder="使用邮箱或者手机号"
                class="input-item"
              />
            </div>
            <div class="password form-item">
              <input
                v-model="loginData.password"
                type="password"
                placeholder="密码"
                class="input-item"
              />
            </div>
            <button @click="login" class="login-btn">登录</button>
            <div class="register">
              <a  href="#" @click="showRegister=!showRegister">没有账号？去注册一个！</a>
            </div>
          </div>
          <div class="divider">
            <span class="line"></span>
            <div class="divider-text">其它登录方式</div>
            <span class="line"></span>
          </div>
          <div class="other-login-wrapper">
            <div class="other-login-item">
              <img src="../assets/icon/qq.png" alt="" />
            </div>
            <div class="other-login-item">
              <img src="../assets/icon/wechat.png" alt="" />
            </div>
          </div>
        </div>


        <div class="login-wrapper" v-else>
          <h3>欢迎新用户！注册一个新账号吧！</h3>
          <br>
          <div class="login-form">
            <div class="username form-item">
              <input
                v-model="registerData.username"
                type="text"
                placeholder="用户名 6-20位数字或字母组合"
                class="input-item"
              />
            </div>
            <div class="password form-item">
              <input
                v-model="registerData.password"
                type="password"
                placeholder="密码 6-16位数字和字母组合"
                class="input-item"
              />
            </div>
            <button @click="register" class="login-btn">注册账号！</button>
            <div class="register">
              <a  href="#" @click="showRegister=!showRegister">返回登录</a>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
import UserApi from "../api/user";
export default {
  data() {
    return {
      showRegister:false,
      loginData: {
        username: "",
        password: "",
      },
      registerData:{
        username: "",
        password: "",
      }
    };
  },
  methods: {
    login() {
      UserApi.login(this.loginData).then((r) => {
        if (r.code === 200) {
          window.localStorage.setItem("token", r.data);
          this.$message.success("登录成功!");
          //初次登陆成功时将用户信息存储在本地存储中
          UserApi.getUser().then(r=>{
            if(r.code===200){
              window.localStorage.setItem("userInfo",JSON.stringify(r.data))
            }
          })
          setTimeout(() => {
            this.$router.push("/blog");
          }, 700);
        }else{
          this.$message.error(r.msg)
        }
      });
    },
    register(){
      UserApi.regisiter(this.registerData).then((r) => {
        if (r.code === 200) {
          this.$message.success("注册成功!现在可以返回登录了！");
          this.registerData = {
              username: "",
              password: "",
          }
          this.loginData = {
              username: "",
              password: "",
          }
          setTimeout(() => {
            this.showRegister = !this.showRegister
          }, 700);
        }else{
          this.$message.error(r.msg)
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100vw;
  height: 100vh;
  text-align: left;
  .content {
    overflow: hidden;
    margin-top: 48px;
    //   background: var(--bg-color);
    box-shadow: var(--box-shadow);
    border-radius: var(--box-radius);
    background: url("../assets/img/login-background.jpg") no-repeat;
    max-width: 1440px;
    .login-wrapper {
      h3 {
        text-align: center;
      }
      .login-form {
        .form-item {
          margin: 20px 0;
          span {
            display: block;
            margin: 5px 20px;
            font-weight: 100;
          }
          .input-item {
            width: 100%;
            border-radius: 20px;
            padding: 20px;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: 200;
            &:focus {
              outline: none;
            }
          }
        }
        .login-btn {
          width: 100%;
          border-radius: 20px;
          color: #fff;
          border: 0;
          font-weight: 100;
          margin-top: 10px;
          cursor: pointer;
        }
        .register{
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 12px;
        }
      }
      .divider {
        width: 100%;
        margin: 20px 0;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        span:nth-child(1) {
          flex: 1;
        }
        span:nth-child(1) {
          flex: 1;
        }
        .login-wrapper {
          display: inline-block;
          max-width: 30%;
          width: 30%;
        }
        .divider-text {
          vertical-align: middle;
          margin: 0 20px;
          line-height: 0px;
          display: inline-block;
          width: 100px;
        }
      }
      .other-login-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .other-login-item {
        border: 1px solid rgb(214, 222, 288);
        padding: 10px;
        margin: 10px;
      }
    }
  }
}
@media (min-width: 1240px) {
  .box {
    // background-color: rgb(29, 67, 89);
    .content {
      width: 100vw;
      min-height: 500px;
      height: 85vh;
      background-position: 0% 35%;
      //   background-size: 100% 100%;
      position: absolute;
      right: 15%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 20px;
      background-color: #fff;
      .login-wrapper {
        width: 50vw;
        max-width: 500px;
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        h3 {
          text-align: center;
          font-size: 45px;
          color: rgb(81, 100, 115);
          margin-bottom: 40px;
        }
        .login-form {
          margin: 10px 0;
          .form-item {
            span {
              color: rgb(81, 100, 115);
            }
            .input-item {
              height: 60px;
              border: 1px solid rgb(214, 222, 228);
            }
          }
          .login-btn {
            height: 50px;
            background-color: rgb(59, 72, 89);
            transition: 0.3s;
          }
          .login-btn:hover {
            height: 50px;
            background-color: rgb(32, 55, 85);
          }
        }
        .divider {
          .line {
            border-bottom: 1px solid rgb(214, 222, 228);
            flex: 1;
          }
        }
        .other-login-item {
          border-radius: 20px;
          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }
  }
}
@media (max-width: 1240px) {
  .box {
    .content {
      width: 85vw;
      max-width: 500px;
      height: 85vh;
      max-height: 600px;
      background: var(--bg-color);
      backdrop-filter: --var(--bg-filter-blur);
      margin: 0 auto;
      border-radius: 20px;
      background-color: #fff;
      position: relative;
      top: 24px;
      .login-wrapper {
        position: relative;
        top: 45%;
        transform: translateY(-50%);
        margin: 24px;
        h3 {
          text-align: center;
          color: rgb(81, 100, 115);
          margin-bottom: 40px;
        }
        .login-form {
          margin: 10px 0;
          .form-item {
            span {
              color: rgb(81, 100, 115);
            }
            .input-item {
              height: 60px;
              border: 1px solid rgb(214, 222, 228);
            }
          }
          .login-btn {
            height: 50px;
            background-color: rgb(59, 72, 89);
            transition: 0.3s;
          }
          .login-btn:hover {
            height: 50px;
            background-color: rgb(32, 55, 85);
          }
        }
        .divider {
          .line {
            border-bottom: 1px solid rgb(214, 222, 228);
            flex: 1;
          }
        }
        .other-login-item {
          border-radius: 20px;
          border: none;
          img {
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }
}
</style>